const path = require("path");
//引入htmlwebpackplugin插件
const HtmlWebpackPluin = require("html-webpack-plugin");

//引入vue-loader插件
const { VueLoaderPlugin } = require("vue-loader");

const config = {
  //打包模式
  mode: "production",
  //文件主入口,相当于vue的main.js
  entry: "./src/index.js",
  //打包出口
  output: {
    //打包路径  __dirname：代表项目当前目录
    path: path.resolve(__dirname, "dist"),
    //打包文件名
    filename: "bundle.js",
    //清理打包无用的文件
    clean: true,
    //指定静态资源打包后的目录
    assetModuleFilename: "imgs/[name][hash][ext]",
  },
  //引入各种loader
  module: {
    rules: [
      //css相关的loader配置
      { test: /\.css$/i, use: ["style-loader", "css-loader"] },
      //配置sass
      {
        test: /\.s[ac]ss/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      //配置支持图片
      { test: /\.(jpg|jpeg|png|svg|gif)$/i, type: "asset/resource" },
      //配置vue-loader
      { test: /\.vue$/i, use: ["vue-loader"] },
    ],
  },
  //解决缺省扩展名问题
  resolve: {
    extensions: [".js", ".vue"],
  },

  //插件
  plugins: [
    //自动生成html
    new HtmlWebpackPluin({
      //是否压缩
      minify: false,
      //指定模板源
      template: "./pulice/index.html",
      //打包生成的html文件名
      filename: "index.html",
    }),
    //vue-loader插件
    new VueLoaderPlugin(),
  ],
  devServer: {
    //配置服务器运行目录
    static: {
      //生成一个虚拟的dist目录，内存中运行
      directory: "dist",
    },
    //配置启动端口号
    port: 9999,
    // hot:true
  },
};

module.exports = config;
